<template>
  <div>
    <video ref="videoRef" width="600" height="400" controls></video>
    <button @click="playVideo">播放视频</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import Hls from "hls.js";

const videoRef: any = ref();
const url =
  "http://xkmspyxn.live.sxmty.com/live/hls/65072fcc05414062bf02088d2a2a77b2/9da977614b044ef59d11779e997a12f8-1.m3u8?zshanxd ";
const playVideo = () => {
  console.log(videoRef.value);
  if (videoRef.value) {
    if (Hls.isSupported()) {
      // 如果支持 hls.js（MediaSource Extensions）
      var hls = new Hls();
      hls.loadSource(url);
      hls.attachMedia(videoRef.value);
      // 自动播放
      hls.on(Hls.Events.MANIFEST_PARSED, function () {
        // videoRef.value.play();
      });
      hls.on(Hls.Events.ERROR, function (event, data) {
        console.error("HLS error:", event, data);
      });
    } else if (videoRef.value.canPlayType("application/vnd.apple.mpegurl")) {
      // 如果支持原生播放
      videoRef.value.src = url;
      // 自动播放
      videoRef.value.addEventListener("canplay", function () {
        // videoRef.value.play();
      });
    }
  }
};
onMounted(() => {});
// 使用video.js
// import { ref, onMounted, onBeforeUnmount, getCurrentInstance } from "vue";
// // import Hls from "hls.js";
// import videojs from "video.js";
// import "video.js/dist/video-js.css";

// const videoPlayer: any = ref();

// let player: any = null;
// // const init = () => {
// //   player = videojs(videoPlayer.value, {
// //     controls: true,
// //     sources: [
// //       {
// //         src:
// //           "http://xkmspyxn.live.sxmty.com/live/hls/65072fcc05414062bf02088d2a2a77b2/9da977614b044ef59d11779e997a12f8-1.m3u8?zshanxd ",
// //         type: "application/x-mpegURL",
// //       },
// //     ],
// //     controlBar: {
// //       remainingTimeDisplay: {
// //         displayNegative: false,
// //       },
// //     },
// //   });
// // };
// // onMounted(() => {
// // init();
// // setTimeout(
// //   () => {
// //     init();
// //   },

// //   300
// // );
// // });

// onBeforeUnmount(() => {
//   if (player) {
//     player.dispose();
//   }
// });
</script>

<style lang="less" scoped></style>
